<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<jsp:include page="/head.jsp"/>
    <link rel="stylesheet" href="assets/css/css/all.css"/>
    <link rel="stylesheet" href="assets/css/main.css"/>
	<style>
		.r{
			position: absolute;
			top: 30%;
			right: 10%;
			font-size: 18px;
		}
		.r a{
			color: black;
			font-weight: bold;
		}
		.r a:hover{
			color: gray;
		}
		.l{
			float: left;
			text-align: center;
			font-size: 16px;
			line-height: 100%;
		}
	</style>
    
    
    
     <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrapvalidator/css/bootstrapValidator.min.css" />
    <script src="assets/plugins/bootstrapvalidator/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/plugins/bootstrapvalidator/js/language/zh_CN.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!--头部-->
    <div class="header">
		<img src="assets/img/images/logo.png" alt="" style="width: 180px;height: 100px">
        <div class="desc">欢迎注册</div>
		<div class="r"><a href="index.jsp">返回首页</a></div>
    </div>
    <!--版心-->
    <div class="container">
	    	<div class="card bg-light shadow-lg">
			<div class="card-header">
				<div class="nav nav-tabs card-header-tabs">
					<a class="nav-item nav-link active" data-toggle="tab" href="#reg"><i
						class="fa fa-user-plus mr-1"></i> 用户注册</a>
				</div>
			</div>
			<div class="card-body">
				<div class="tab-content">

					<div class="tab-pane fade show active" id="reg">
						<form name="regForm" action="regServlet" method="post" enctype="multipart/form-data" id="reg_form"
                data-bv-message="验证不通过"
                data-bv-feedbackicons-valid="fa fa-check"
                data-bv-feedbackicons-invalid="fa fa-times"
                data-bv-feedbackicons-validating="fa fa-refresh"
            >
							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>用户名</label>
								<div class="col-sm-9">
									<input
										name="hdlUserName" id="hdlUserName" type="text" placeholder="由3到20个单词字符组成"
										 class="form-control" value=""
                     data-bv-trigger="keyup"
                     required data-bv-notempty-message="用户名不能为空"
                     pattern="^[a-zA-Z]\w{2,19}$" data-bv-regexp-message="用户名必须由字母开始的3-20个单词字符组成"
                     data-bv-different data-bv-different-field="hdlUserPsd" data-bv-different-message="用户名不能和密码一样"
                     >
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>密码</label>
								<div class="col-sm-9">
									<input name="hdlUserPsd" id="pwd" type="password"
										placeholder="由3到20个字符组成"
										class="form-control" value=""
                    
                    data-bv-trigger="keyup"
                    required data-bv-notempty-message="密码不能为空"
                    pattern="^.{3,20}$" data-bv-regexp-message="密码必须由3-20个字符组成"
                    data-bv-identical data-bv-identical-field="userPasswordConfirm" data-bv-identical-message="两次输入的密码必须一致"
                    data-bv-different data-bv-different-field="hdlUserName" data-bv-different-message="密码不能和用户名一样"
                    >
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									 class="text-danger">*</b>密码确认</label>
								<div class="col-sm-9">
									<input  name="userPasswordConfirm"
										type="password" placeholder="两次输入密码一致" class="form-control"
										value=""
                    data-bv-trigger="keyup"
                    required data-bv-notempty-message="密码确认不能为空"
                    data-bv-identical data-bv-identical-field="hdlUserPsd" data-bv-identical-message="两次输入的密码必须一致"
                    >
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>真实姓名</label>
								<div class="col-sm-9">
									<input  name="hdlUserRealname" type="text"
										 placeholder="由2到8个汉字组成"
										 class="form-control" value=""
                     data-bv-trigger="keyup"
                     required data-bv-notempty-message="真实姓名不能为空"
                     pattern="^[\u4100-\u9fa5]{2,8}$" data-bv-regexp-message="真实姓名必须由2-8个中文字符组成"
                     >
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right"><b
									class="text-danger">*</b>性别</label>
								<div class="col-sm-9">
									<input type="radio" name="hdlUserSex" value="true"
										checked="checked">男 <input type="radio" name="hdlUserSex"
										value="false">女
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">出生日期</label>
								<div class="col-sm-9">
									<input type="date" name="hdlUserBirthday" class="form-control"
										style="width: auto;" />
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">电话</label>
								<div class="col-sm-9">
									<input name="hdlUserPhone" type="text" placeholder="有11位数字组成"
										class="form-control" value="">
								</div>
							</div>

							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">邮箱</label>
								<div class="col-sm-9">
									<input name="hdlUserEmail" type="text" placeholder="电子邮箱地址"
										class="form-control" value="">
								</div>
							</div>
							
							<div class="form-group row">
								<label class="col-sm-3 col-form-label text-right">头像选择</label>
								<div class="col-sm-9">
								<input type="file" id="log"   name="hdlUserLog"/>
								</div>
								<img src="" alt="" id="img" style="position:relative;right: -550px;top:-35px;width:54px;height:54px;border-radius: 50%;">
							</div>
							
							<div class="form-group row">
							<label class="col-sm-3 col-form-label text-right"></label>
								<input type="checkbox" id="ck"  />
	    						<span>我已阅读并同意<a href="##">《嗨底捞用户注册协议》</a></span>
							</div>

							<div class="form-group row">
								<div class="col-sm-9 offset-sm-3">
									<button class="btn btn-primary" type="submit">
										<i class="fa fa-user-plus mr-1"></i> 注册
									</button>
									<a href="./login.jsp" class="btn btn-info">登录</a> 
								</div>
							</div>
						</form>
					</div>
				</div>

			</div>
		</div>
    	
    </div>
    <script src="reg.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
<script>
	//选择头像
	var oFile = document.querySelector("#log");
	var oImg = document.querySelector('#img');
	oFile.addEventListener("change",function(){
	    let f = oFile.files[0];
	    if(f==undefined){
	        oImg.src='img/1.jpg';
	    }else{
	        let reader = new FileReader();
	        reader.addEventListener("load",function () {
	            oImg.src= reader.result;
	        })
	        reader.readAsDataURL(f);
	    }
	     });
	
</script>